<template>
  <a-card :bordered="false">
    <div class="card-title">{{ $route.meta.title }}</div>
    <a-spin :spinning="isLoading">
      <a-row>
        <a-col :span="14">
          <a-form :form="form">
            <a-form-item label="广告名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['name', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]" />
            </a-form-item>
            <a-form-item label="模版类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-radio-group
                v-decorator="['tpl_id', { initialValue: adActionType.TEACHER_QR_CODE.value }]"
                @change="handleChangeTpl"
                button-style="solid"
              >
                <a-radio-button
                  v-for="(item, index) in adActionType.getData()"
                  :key="index"
                  :disabled="record.hasOwnProperty('id')"
                  :value="item.value"
                  >{{ item.name }}</a-radio-button
                >
              </a-radio-group>
            </a-form-item>
          </a-form>
          <component ref="actionForm" :ad="ad" @competed="tplLoaded" :is="tpl" />
        </a-col>
        <a-col :span="10">
          <div class="phone">
            <div id="phone-body">
              <div class="phone-content">网页内容</div>
            </div>
          </div>
        </a-col>
      </a-row>

      <a-button type="primary" @click="handleSubmit" :loading="isBtnLoading">提交</a-button>
      <a-button style="margin-left: 15px" @click="goBack" :loading="isBtnLoading">返回</a-button>
    </a-spin>
  </a-card>
</template>

<script>
import * as Api from '@/api/ad'
import adActionType from '@/common/enum/adActionType'
import ad from './modules/ad'
const tplList = [
  () => import('@/views/ad/actions/teacherQrCode'),
  () => import('@/views/ad/actions/banner'),
  () => import('@/views/ad/actions/WXQrCode')
]
export default {
  name: 'actionForm',
  data() {
    return {
      type: 0,
      adId: '',
      // 标签布局属性
      labelCol: { span: 3 },
      // 输入框布局属性
      wrapperCol: { span: 10 },
      tpl: null,
      typeName: '',
      // loading状态
      isLoading: false,
      isBtnLoading: false,
      adActionType,
      // 当前表单元素
      form: this.$form.createForm(this),
      positionType: 10,
      ad: null,
      // 当前记录
      record: {
        type: 10,
        position: 10,
        value: 50,
        size: 50
      }
    }
  },
  mounted() {
    this.ad = ad.setTarget('#phone-body')
    this.adId = this.$route.query.id
    if (this.adId) {
      this.isLoading = true
      Api.detail({ id: this.adId })
        .then((res) => {
          res.data.actionParams.wx_work_setting_id = res.data.wx_work_setting_id
          this.record = res.data
          this.setFieldsValue()
          this.loadTpl(this.record.tpl_id)
        })
        .catch((res) => {
          this.$message.error('参数错误', 1.5)
          this.goBack()
        })
        .finally(() => {
          this.isLoading = false
        })
    } else {
      this.loadTpl(0)
    }
  },
  methods: {
    tplLoaded() {
      this.$refs.actionForm.setFormData(this.record.actionParams || {})
    },
    loadTpl(type) {
      this.tpl = tplList[type]
    },
    goBack() {
      this.$router.push({ path: '/ad/index' })
    },

    /**
     * 设置默认值
     */
    setFieldsValue() {
      const {
        record,
        form: { setFieldsValue }
      } = this
      // 设置表单内容
      this.$nextTick(() => {
        const d = _.pick(record, ['name', 'tpl_id'])
        setFieldsValue(d)
      })
    },
    /**
     * 确认按钮
     */
    handleSubmit(e) {
      e.preventDefault()
      const {
        form: { validateFields }
      } = this
      validateFields((errors, values) => {
        if (!errors) {
          this.$refs.actionForm.getFormData().then((actionParams) => {
            if (this.adId) {
              values.id = this.adId
            }
            // this.isLoading=true
            if (values.tpl_id === 2) {
              values.wx_work_setting_id = actionParams.wx_work_setting_id
              actionParams.wx_work_setting_id = undefined
            }
            // console.log(11111, values, actionParams);
            Api[this.adId ? 'edit' : 'add']({
              ...values,
              actionParams
            })
              .then((res) => {
                this.$message.success('保存成功')
                this.$router.push({ path: '/ad/index' })
              })
              .finally(() => {
                this.isLoading = false
              })
          })
        }
      })
    },
    handleChangeTpl(e) {
      this.record.tpl_id = e.target.value
      this.loadTpl(e.target.value)
    }
  }
}
</script>

<style scoped>
.phone {
  width: 284px;
  height: 600px;
  background: url('../../assets/phone.jpeg') no-repeat;
  background-size: 284px 600px;
  padding: 87px 22px 0 22px;
}
#phone-body {
  width: 100%;
  height: 427px;
  overflow: auto;
  position: relative;
}
.phone-content {
  text-align: center;
  width: 100%;
  height: 427px;
  padding-top: 210px;
  color: #fff;
  background-color: #3a87ad;
}
</style>
